<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人资料 - 线框图原型</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f6f7fb;
      font-family: Arial, sans-serif;
    }
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 220px;
      height: 100vh;
      background: #232946;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 24px 0 0 0;
      box-sizing: border-box;
    }
    .sidebar .logo {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 32px;
      letter-spacing: 2px;
    }
    .sidebar .menu {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 0 0 24px;
    }
    .sidebar .menu .menu-item {
      padding: 10px 0;
      border-radius: 6px 0 0 6px;
      cursor: pointer;
      color: #bfc8e2;
      font-size: 1rem;
    }
    .sidebar .menu .menu-item.active {
      background: #e7eaf6;
      color: #232946;
      font-weight: bold;
    }
    .main {
      margin-left: 220px;
      min-height: 100vh;
      background: #f6f7fb;
    }
    .breadcrumb {
      color: #888;
      font-size: 0.95rem;
      margin: 32px 0 0 32px;
    }
    .profile-header {
      background: linear-gradient(90deg, #e0f7fa 0%, #e8f5e9 100%);
      border-radius: 18px;
      margin: 24px 32px 0 32px;
      padding: 32px 32px 24px 32px;
      display: flex;
      align-items: center;
      gap: 32px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
    }
    .avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      color: #6a9cfb;
      font-weight: bold;
    }
    .profile-info {
      flex: 1;
    }
    .profile-info .name {
      font-size: 2rem;
      font-weight: bold;
      color: #3ecf8e;
      margin-bottom: 8px;
    }
    .profile-info .username {
      color: #6a9cfb;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }
    .profile-info .id, .profile-info .email {
      display: inline-block;
      background: #fff;
      color: #888;
      border-radius: 8px;
      padding: 4px 12px;
      font-size: 0.98rem;
      margin-right: 12px;
      margin-bottom: 4px;
      box-shadow: 0 1px 4px rgba(80, 60, 180, 0.04);
    }
    .section {
      background: #fff;
      border-radius: 18px;
      margin: 24px 32px 0 32px;
      padding: 24px 32px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
    }
    .section-title {
      font-size: 1.2rem;
      color: #6a9cfb;
      font-weight: bold;
      margin-bottom: 16px;
      border-left: 4px solid #6a9cfb;
      padding-left: 12px;
    }
    .form-row {
      display: flex;
      gap: 24px;
      margin-bottom: 18px;
      align-items: center;
    }
    .form-label {
      width: 100px;
      color: #888;
      font-size: 1rem;
      text-align: right;
      margin-right: 8px;
    }
    .form-input {
      flex: 1;
      padding: 10px 16px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 1rem;
      background: #f6f7fb;
    }
    .form-textarea {
      flex: 1;
      min-height: 60px;
      padding: 10px 16px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 1rem;
      background: #f6f7fb;
      resize: vertical;
    }
    .edit-btn {
      background: #6a9cfb;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      margin-left: 12px;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">SG3L</div>
    <div class="menu">
      <div class="menu-item">仪表盘</div>
      <div class="menu-item">分析页</div>
      <div class="menu-item">监控页</div>
      <div class="menu-item">模板中心</div>
      <div class="menu-item">组件中心</div>
      <div class="menu-item">用户管理</div>
      <div class="menu-item">角色管理</div>
      <div class="menu-item">日志中心</div>
      <div class="menu-item">权限管理</div>
      <div class="menu-item">系统设置</div>
    </div>
  </div>
  <div class="main">
    <div class="breadcrumb">首页 / 个人中心 / 个人资料</div>
    <div class="profile-header">
      <div class="avatar">S</div>
      <div class="profile-info">
        <div class="name">超级管理员</div>
        <div class="username">用户名：<span style="color:#6a9cfb;">superadmin</span></div>
        <div class="id">ID: 427b9870-3308-4938-87e4-69a00b855193</div>
        <div class="email">superadmin@system.com</div>
      </div>
    </div>
    <div class="section">
      <div class="section-title" style="display:flex;align-items:center;gap:12px;">
        <span>基本信息</span>
        <button class="edit-btn" type="button" style="margin-left:auto;">编辑</button>
      </div>
      <form>
        <div class="form-row">
          <div class="form-label">* 用户名</div>
          <input class="form-input" type="text" value="superadmin" disabled style="max-width:220px;" />
          <div class="form-label">昵称</div>
          <input class="form-input" type="text" value="超级管理员" disabled style="max-width:220px;" />
        </div>
        <div class="form-row">
          <div class="form-label">邮箱</div>
          <input class="form-input" type="email" value="superadmin@system.com" disabled />
        </div>
        <div class="form-row">
          <div class="form-label">个人简介</div>
          <textarea class="form-textarea" disabled>系统超级管理员账户</textarea>
        </div>
      </form>
    </div>
  </div>
</body>
</html>
